<div class="layui-form" lay-filter="layuiadmin-form-role" id="form">
    <div class="form-cont">
        <div class="layui-form-item verify">
            <label class="layui-form-label">设备分组</label>
            <div class="layui-input-block hxr-select" @click="choose2">
                <input type="text" verify="require" v-model="detail.device_group_name" placeholder="请选择分组"
                       class="layui-input" readonly>
                <i class="layui-icon layui-icon-right"></i>
                <span class="hint">设备分组必选</span>
            </div>
        </div>
        
        <div class="layui-form-item verify">
		  <label class="layui-form-label">模式</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-select">
		      	<div class="layui-select-title"><input type="text" name='usage_mode' :data='detail.usage_mode' placeholder="请选择模式" class="layui-input layui-unselect" readonly><i
		      		 class="layui-edge"></i></div>
		      	<dl class="layui-anim layui-anim-upbit">
                    <dd class="layui-select-tips layui-this">请选择</dd>
		      		<dd :data='index+1' v-for="(x,index) in select">{{x}}</dd>
		      	</dl>
		      </div>
		  </div>
		</div>

        
        <div class="layui-form-item verify">
            <label class="layui-form-label">计费规则</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" name='device_rule_id'
                                                           :data='detail.device_rule_id' placeholder="请选择计费规则"
                                                           class="layui-input layui-unselect" readonly
                                                           @click="rule_list"><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择</dd>
                        <dd :data='x.device_rule_id' v-for="(x,index) in rule" @click="ruleF(x)">{{x.rule_name}}</dd>
                    </dl>
                </div>
                <span class="hint">计费规则必选</span>
            </div>
        </div>
        
        <div class="layui-form-item verify">
            <label class="layui-form-label">酒店计费规则</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" name='hotel_id'
                                                           :data='detail.hotel_id' placeholder="请选择酒店计费规则"
                                                           class="layui-input layui-unselect" readonly
                                                           @click="hotel_rule_list"><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择</dd>
                        <dd :data='x.hotel_id' v-for="(x,index) in hotel" @click="ruleF(x)">{{x.activity_name}}</dd>
                    </dl>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item verify">
            <label class="layui-form-label" style="font-size:10px;">绑定后的免费时间(小时)</label>
            <div class="layui-input-block">
                <input type="number" v-model="detail.free_time" placeholder="请输入被绑定后的免费时间" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item verify">
            <label class="layui-form-label">设备名称</label>
            <div class="layui-input-block">
                <input type="text" verify="require" autocomplete="off" v-model="detail.device_name"
                       placeholder="请输入设备名称" class="layui-input">
                <span class="hint">设备名称必填</span>
            </div>
        </div>
        
        <div class="layui-form-item verify"  v-if="!detail.agent_id" >
            <label class="layui-form-label">设备cpu</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title">
                        <input type="text" @click="typeL()" name='cpu' :data='detail.cpu'  placeholder="请选择cpu" class="layui-input layui-unselect" readonly>
                        <i class="layui-edge"></i>
                    </div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择</dd>
                        <dd v-if="x.type==1" :data='x.disposed_id' v-for="(x,index) in typel" @click="ruleF(x)">
                            {{x.disposed_name}}
                        </dd>
                    </dl>
                </div>
                <span class="hint">cpu必选</span>
            </div>
        </div>
        <div class="layui-form-item verify" v-if="!detail.agent_id">
            <label class="layui-form-label">设备显卡</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" @click="typeL()" name='video_card'
                                                           :data='detail.video_card' placeholder="请选择显卡"
                                                           class="layui-input layui-unselect" readonly><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择</dd>
                        <dd v-if="x.type==3" :data='x.disposed_id' v-for="(x,index) in typel" @click="ruleF(x)">
                            {{x.disposed_name}}
                        </dd>
                    </dl>
                </div>
                <span class="hint">显卡必选</span>
            </div>
        </div>
        <div class="layui-form-item verify"  v-if="!detail.agent_id">
            <label class="layui-form-label">设备内存条</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" @click="typeL()" name='memory'
                                                           :data='detail.memory' placeholder="请选择内存条"
                                                           class="layui-input layui-unselect" readonly><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择</dd>
                        <dd v-if="x.type==2" :data='x.disposed_id' v-for="(x,index) in typel" @click="ruleF(x)">
                            {{x.disposed_name}}
                        </dd>
                    </dl>
                </div>
                <span class="hint">内存条必选</span>
            </div>
        </div>
        <div class="layui-form-item verify"  v-if="!detail.agent_id" >
            <label class="layui-form-label">设备显示器</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" @click="typeL()" name='monitor'
                                                           :data='detail.monitor' placeholder="请选择显示器"
                                                           class="layui-input layui-unselect" readonly><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择</dd>
                        <dd v-if="x.type==5" :data='x.disposed_id' v-for="(x,index) in typel" @click="ruleF(x)">
                            {{x.disposed_name}}
                        </dd>
                    </dl>
                </div>
                <span class="hint">显示器必选</span>
            </div>
        </div>
        <div class="layui-form-item verify"  v-if="!detail.agent_id">
            <label class="layui-form-label">设备硬盘</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" @click="typeL()" name='storage'
                                                           :data='detail.storage' placeholder="请选择硬盘"
                                                           class="layui-input layui-unselect" readonly><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择</dd>
                        <dd v-if="x.type==4" :data='x.disposed_id' v-for="(x,index) in typel" @click="ruleF(x)">
                            {{x.disposed_name}}
                        </dd>
                    </dl>
                </div>
                <span class="hint">硬盘必选</span>
            </div>
        </div>
        <div class="layui-form-item verify"  v-if="!detail.agent_id">
            <label class="layui-form-label">设备主板</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" @click="typeL()" name='mainboard'
                                                           :data='detail.mainboard' placeholder="请选择主板"
                                                           class="layui-input layui-unselect" readonly><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择</dd>
                        <dd v-if="x.type==6" :data='x.disposed_id' v-for="(x,index) in typel" @click="ruleF(x)">
                            {{x.disposed_name}}
                        </dd>
                    </dl>
                </div>
                <span class="hint">主板必选</span>
            </div>
        </div>
        <template v-if="type!=1">
            <!-- <div class="layui-form-item verify">
              <label class="layui-form-label">设备产品key</label>
              <div class="layui-input-block">
                  <textarea type="text" class="layui-textarea" verify="require" v-model="detail.product_key" placeholder="请输入设备产品key"></textarea>
                  <span class="hint">设备产品key必填</span>
              </div>
            </div>
            <div class="layui-form-item verify">
              <label class="layui-form-label">设备证书</label>
              <div class="layui-input-block">
                  <textarea type="text" class="layui-textarea" verify="require" v-model="detail.device_name_key" placeholder="请输入设备证书"></textarea>
                  <span class="hint">设备证书必填</span>
              </div>
            </div> -->
            <div class="layui-form-item verify">
                <label class="layui-form-label">设备识别码</label>
                <div class="layui-input-block">
                    <input type="text" autocomplete="off" v-model="detail.identifiers" placeholder="请输入设备识别码"
                           class="layui-input">
                </div>
            </div>
	        <div class="layui-form-item verify">
	            <label class="layui-form-label">网卡地址</label>
	            <div class="layui-input-block">
	                <input type="text" verify="mac_id" autocomplete="off" v-model="detail.mac_id" placeholder="请输入网卡地址" class="layui-input">
	                <span class="hint"></span>
	            </div>
	        </div>
        </template>
        <div class="layui-form-item verify">
            <label class="layui-form-label">设备信息</label>
            <div class="layui-input-block">
                <textarea type="text" class="layui-textarea" verify="require" v-model="detail.device_desc"></textarea>
                <span class="hint">设备信息必填</span>
            </div>
        </div>
        <div class="layui-form-item verify" v-if="type==1">
            <label class="layui-form-label">设备数量</label>
            <div class="layui-input-block">
                <input type="number" verify="znum1" autocomplete="off" v-model="detail.number" class="layui-input">
                <span class="hint"></span>
            </div>
        </div>
<!--        <div class="layui-form-item verify">-->
<!--            <label class="layui-form-label" style="width: 85px;padding-left: 10px;">设备成本费率(%)</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="number" verify="require|range" autocomplete="off" v-model="detail.agent_cost_rate"-->
<!--                       placeholder="请输入成本费率" class="layui-input">-->
<!--                <span class="hint">设备成本费率大于等于0小于100</span>-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-form-item verify">
            <label class="layui-form-label" style="width: 85px;padding-left: 10px;">代理佣金比例(%)</label>
            <div class="layui-input-block">
                <input type="number"  autocomplete="off" v-model="detail.withdraw_proportion"
                       placeholder="请输入佣金比例" class="layui-input">
                <span class="hint">代理佣金比例大于等于0小于100</span>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label" style="width: 85px;padding-left: 10px;">会员分红比例(%)</label>
            <div class="layui-input-block">
                <input type="number" verify="range" autocomplete="off" v-model="detail.bonus_proportion"
                       placeholder="请输入成本费率" class="layui-input">
                <span class="hint">会员分红比例大于等于0小于100</span>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">模块类型</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" verify="require" @click="iotList" name='iot_id'
                                                           :data='detail.iot_id' placeholder="请选择模块类型"
                                                           class="layui-input layui-unselect" readonly><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择</dd>
                        <dd :data='x.iot_id' v-for="x in iot">{{x.iot_name}}</dd>
                    </dl>
                </div>
                <span class="hint">模块类型必选</span>
            </div>
        </div>
        <!-- <div class="layui-form-item verify" v-if="type!=1">
          <label class="layui-form-label">代理商</label>
          <div class="layui-input-block hxr-select" @click="choose">
              <input type="text" v-model="detail.agent_name" placeholder="请选择代理" class="layui-input" readonly>
              <i class="layui-icon layui-icon-right"></i>
          </div>
        </div> -->
        <div class="layui-form-item verify">
            <label class="layui-form-label">安置地址</label>
            <div class="layui-input-block">
                <input type="text" v-model="detail.address" placeholder="请输入地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">安置时间</label>
            <div class="layui-input-block">
                <input type="text" id='time' name='reg_time' placeholder="请选择时间" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">模块状态</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.module_status==1}"
                     lay-skin="_switch" @click="radioF()"><em>{{detail.module_status==1?'启用':'停用'}}</em><i></i></div>
            </div>
        </div>
        <!-- <div class="layui-form-item verify">
          <label class="layui-form-label">报警状态</label>
          <div class="layui-input-block">
              <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.alarm_status==2}" lay-skin="_switch" @click="radioF2()"><em>{{detail.alarm_status==1?'关闭':'开启'}}</em><i></i></div>
          </div>
        </div> -->
        <div class="layui-form-item verify">
            <label class="layui-form-label">供货商</label>
            <div class="layui-input-block hxr-select" @click="choose3">
                <input type="text"  v-model="detail.supplier_name" placeholder="选择供货商" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label" style="width: 85px;padding-left: 10px;">供货商佣金比例比例(%)</label>
            <div class="layui-input-block">
                <input type="number" verify="range"  autocomplete="off" v-model="detail.supplier_proportion"
                       placeholder="请输入佣金比例" class="layui-input">
                <span class="hint">代理佣金比例大于等于0小于100</span>
            </div>
        </div>
    </div>
    <div class="form-btn" v-if="type!=3">
        <input type="button" value="保存" class="layui-btn" @click="submit">
    </div>
</div>
<style type="text/css">
    .form-cont {
        overflow: auto;
    }
</style>
<script>
    layui.use(['form', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form, upload = layui.upload, laydate = layui.laydate;

        var forms = new Vue({
            el: '#form',
            data: {
                group: '',
                rule: '',
                activity: '',
                hotel:'',
                iot: '',
                type: layui.admin.objData.type,
                detail: {
                    module_status: 1,
                    device_group_name: '',
                    rule_name: '',
                    module_type: '',
                    alarm_status: 1,
					cpu: '',
					video_card: '',
					memory: '',
					monitor: '',
					storage: '',
					mainboard: '',
					device_rule_id:'',
	                hotel_id: '',
	                usage_mode:'',
                    supplier_name:''

                },
                old_detail: {},
                typel: '',
				select:['校园模式','酒店模式']
            },
            mounted() {
                //初始化
                laydate.render({
                    elem: '#time',
                    type: 'datetime'
                });
                if (this.type != 1) this.detail = layui.admin.objData.detail, this.old_detail = JSON.stringify(layui.admin.objData.detail);
                layui.admin.device = this.detail;
                $('input[name="iot_id"]').val(this.detail.iot_name);
                $('input[name="device_rule_id"]').val(this.detail.rule_name);
                $('input[name="device_activity_id"]').val(this.detail.activity_name);
                $('input[name="hotel_id"]').val(this.detail.hotel_name);
                $('input[name="reg_time"]').val(this.detail.reg_time);
                $('input[name="cpu"]').val(this.detail.cpu_name);
                $('input[name="video_card"]').val(this.detail.video_card_name);
                $('input[name="memory"]').val(this.detail.memory_name);
                $('input[name="monitor"]').val(this.detail.monitor_name);
                $('input[name="storage"]').val(this.detail.storage_name);
                $('input[name="mainboard"]').val(this.detail.mainboard_name);
				$('input[name="usage_mode"]').val(this.select[this.detail.usage_mode-1]);
            },
            methods: {
                radioF() {//radio选择
                    this.detail.module_status == 1 ? this.detail.module_status = 2 : this.detail.module_status = 1;
                },
                radioF2() {//radio选择
                    this.detail.alarm_status == 1 ? this.detail.alarm_status = 2 : this.detail.alarm_status = 1;
                },
                choose() {
                    layui.admin.pups = layer.open({
                        type: 1,
                        id: 'pup-conts',
                        title: '选择代理',
                        btn: [],
                        area: ['800px', '600px'],
                        success: function (layero, index) {
                            $('#pup-conts').load(layui.conf.views + 'agent/agentselect.html?v='+layui.cache.version);
                        }
                    })
                },
                choose2() {
                    layui.admin.pups = layer.open({
                        type: 1,
                        id: 'pup-conts',
                        title: '选择设备组',
                        btn: [],
                        area: ['900px', '600px'],
                        success: function (layero, index) {
                            $('#pup-conts').load(layui.conf.views + 'device_group/device_grouplist.html?v='+layui.cache.version);
                        }
                    })
                },
                choose3() {
                    layui.admin.pups = layer.open({
                        type: 1,
                        id: 'pup-conts',
                        title: '选择供货商',
                        btn: [],
                        area: ['900px', '600px'],
                        success: function (layero, index) {
                            $('#pup-conts').load(layui.conf.views + 'device/supplier_select.html?v='+layui.cache.version);
                        }
                    })
                },
                ruleF: function (x) {

                    this.detail.rule_name = x.rule_name;
                },
                submit: function () {
                    if (layui.admin.form('#form')) {

                        Object.assign(this.detail, {
                            device_rule_id: parseInt($('input[name="device_rule_id"]').attr('data')),
                            hotel_id: parseInt($('input[name="hotel_id"]').attr('data')),
                         //   device_activity_id: parseInt($('input[name="device_activity_id"]').attr('data')),
                            iot_id: parseInt($('input[name="iot_id"]').attr('data')),
                            reg_time: $('input[name="reg_time"]').val() ? $('input[name="reg_time"]').val() : '',
                            cpu: parseInt($('input[name="cpu"]').attr('data')),
                            video_card: parseInt($('input[name="video_card"]').attr('data')),
                            memory: parseInt($('input[name="memory"]').attr('data')),
                            monitor: parseInt($('input[name="monitor"]').attr('data')),
                            storage: parseInt($('input[name="storage"]').attr('data')),
                            mainboard: parseInt($('input[name="mainboard"]').attr('data')),
    	  					usage_mode:parseInt($($("input[name='usage_mode']")[1]).attr('data'))
                        });
                        
                        if (this.type == 2) {   //编辑
                            var data = layui.admin.filter(this.detail, JSON.parse(this.old_detail), 'device_id');
                            if (data) {
                                layui.admin.formapi('device/update', data);
                            }
                        } else {  //添加
                            layui.admin.formapi('device/add', this.detail);
                        }
                    }
                },
                groupF: function (x) {
                    $('input[name="device_rule_id"]').val(x.rule_name).attr('data', x.device_rule_id);
                },
                group_list: function () {
                    var _this = this;
                    if (!this.group) {
                        layui.admin.ajax('device/group_list', {}, 1).then(function (res) {
                            _this.group = res.data.list;
                        });
                    }
                },
                rule_list: function () {
                    var _this = this;
                    if (!this.rule) {
                        layui.admin.ajax('device/rule_list', {}, 1).then(function (res) {
                            _this.rule = res.data.list;
                        });
                    }
                },
                hotel_rule_list: function () {
                    var _this = this;
                    if (!this.hotel) {
                        layui.admin.ajax('device/hotel_rule_list', {}, 1).then(function (res) {
                            _this.hotel = res.data.list;
                        });
                    }
                },
                activity_list: function () {
                    var _this = this;
                    if (!this.activity) {
                        layui.admin.ajax('device/activity_list', {}, 1).then(function (res) {
                            _this.activity = res.data;
                        });
                    }
                },
                iotList: function () {
                    var _this = this;
                    if (!this.iot) {
                        layui.admin.ajax('iot/list', {status: 1}, 1).then(function (res) {
                            _this.iot = res.data.list;
                            if (!_this.iot.length) {
                                layer.msg('无可用模块');
                            }
                        });
                    }
                },
                typeL: function () {
                    var _this = this;
                    if (!this.typel) {
                        layui.admin.ajax('disposed/get_disposed_list', {}, 1).then(function (res) {
                            _this.typel = res.data;
                        });
                    }
                }
            }
        })
    });
</script>
